import React, { Component } from 'react'
/**
 * 封装 Button 组件
 * <Button type="primary">发送</Button>  =>  <button>发送</button>
 * 属性:
 *  * type 
 *    * primary  蓝色
 *    * danger   红色
 *  * disable
 *    * true   则按钮不可点
 *    * false  则按钮可点
 *  * loading 
 *    * true   则按钮会显示 loading 的效果
 *    * false  则按钮不会显示 loading
 */
import './2.css';
import gif from './loading.gif';

export default class Button extends Component {
  
  render() {
    // console.log(this.props);
    //获取组件标签的 type, disabled, loading 属性
    let {type, disabled, loading, onClick} = this.props;

    return (
      <button disabled={disabled} className={type} onClick={onClick}>
        {loading ? <img style={{width: 12}} src={gif} /> : null }
        {this.props.children}
      </button>
    )
  }
}
